<template>
  <div style="overflow: hidden; width: 100%;">
    <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents"></vxe-grid>
  </div>
</template>

<script lang="tsx" setup>
import {reactive, ref} from 'vue'
import {VxeGridInstance, VxeGridListeners, VxeGridProps} from 'vxe-table'
import {
  deleteApi, findCustomSetting,
  findPageListApi, saveCustomSetting,
  vxeTableColumns,
  vxeTableFormSchema
} from "#/views/project/list/projectListData";


import ProjectAddDrawer from './projectAdd.vue';
import {VxeUI} from "vxe-pc-ui";

let openProjectAddDrawer = ref(false)
const gridRef = ref<VxeGridInstance<object>>()



const gridOptions = reactive<VxeGridProps<object>>({
  id: 'projectListGrids',
  border: true,
  keepSource: true,
  align:'center',
  emptyText: '没有更多数据了！',
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  columnConfig: {
    resizable: true
  },
  customConfig: {
    mode: 'drawer',
    storage: {
      visible:true,
      resizable:true,
      sort:true,
      fixed:true,
    },
  },
  loading: false,
  showOverflow: true,
  rowConfig: {
    isHover: true,
  },
  toolbarConfig: {
    size: 'mini',
    buttons: [
      //insert_actived 单元格编辑
      {name: '新增', code: 'openProjectAdd',status: 'primary'},
      {name: '批量删除', code: 'delete'}
    ]
  },
  sortConfig: {
    remote: true,
    multiple: true,
    chronological: true,
    defaultSort: [
      {field: 'projectStatus', order: 'asc'},
      {field: 'createTime', order: 'asc'},
      {field: 'updateTime', order: 'asc'},
    ]
  },
  formConfig:vxeTableFormSchema,
  columns: vxeTableColumns,
  pagerConfig: {
    enabled: true,
  },
  proxyConfig: {
    // 启用表单代理
    form: true,
    ajax: {
      // 接收 Promise
      query: ({page, sort, sorts, filters, form}) => {
        console.log("ajax query");
        console.log(form);
        return findPageListApi(page,sort,sorts,filters,form)
      },
      delete: ({body}) => {
        console.log("ajax delete");
        console.log(body.removeRecords);
        return deleteApi(body.removeRecords)
      },
    }
  },
})

const  data= 'Data from parent component';
const gridEvents: VxeGridListeners<object> = {

  sortChange({column, field, order, sortBy, sortList}) {
    const $grid = gridRef.value
    if ($grid) {
      console.log(field);
      console.log(order);
      $grid.sort(field,order)
      $grid.commitProxy('query')
    }
  },

  //width="600" size="small" show-footer show-confirm-button show-cancel-button
  toolbarButtonClick (params) {
    console.log(params)
    console.log(params.code)

    const  data={
      objectId:'',
      operationType: 'add',
      operationName: "新增项目",
    }
    //parameter
    if('openProjectAdd'===params.code){
      VxeUI.drawer.open({
        id:"openProjectAdd",
        title: '新增数据',
        size: 'small',
        mask: false,
        lockView: false,
        showFooter: true,
        showConfirmButton: true,
        maskClosable: true,
        showCancelButton: true,
        destroyOnClose: true,
        slots: {
          default () {
            return  <ProjectAddDrawer paramData={{data}} ></ProjectAddDrawer>
          },
        },
        beforeHideMethod () {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              VxeUI.modal.confirm('您确定要关闭吗？').then(type => {
                if (type === 'confirm') {
                  VxeUI.modal.message({
                    content: `允许关闭 ${type}`,
                    status: 'success'
                  })
                  resolve(null)
                } else {
                  VxeUI.modal.message({
                    content: `禁止关闭 ${type}`,
                    status: 'error'
                  })
                  // 返回 Error 禁止关闭
                  reject(new Error())
                }
              })
            }, 300)
          })
        },
      })
    }




  }
}
</script>
